<template>
  <div class="absolute top-0.5 right-0.5 bg-white p-3 z-30">
    <p class="text-xs text-gray-500">不带贴图模型</p>
    <label
      class="flex items-center mt-1 cursor-pointer"
      v-for="item in option"
      :key="item"
      @click.prevent="
        () => {
          handleChecked(item);
        }
      "
    >
      <input
        class="w-5 h-5 flex items-center justify-center bg-gray-100 rounded-lg pointer-events-none"
        :checked="checked[item]"
        type="checkbox"
        :name="item"
        :value="item"
      />
      <span class="ml-2">{{ item.split("/").pop() }}</span>
    </label>
    <p class="text-xs mt-2 color text-gray-500">带贴图模型</p>
    <label
      class="flex items-center mt-1 cursor-pointer"
      v-for="item in textureOption"
      :key="item"
      @click.prevent="
        () => {
          handleChecked(item);
        }
      "
    >
      <input
        class="w-5 h-5 flex items-center justify-center bg-gray-100 rounded-lg pointer-events-none"
        :checked="checked[item]"
        type="checkbox"
        :name="item"
        :value="item"
      />
      <span class="ml-2">{{ item.split("/").pop() }}</span>
    </label>
  </div>
</template>

<script lang="ts" setup>
import { option, checked, textureOption } from "../utils/type";
const emits = defineEmits(["handleChecked"]);
function handleChecked(item: string) {
  emits("handleChecked", item);
}
</script>
